<template>
  <div class="userdingdan clear">
    <div class="outdiv biaoti">用户订单管理</div>
    <hr style="height:1px;border: none;border-top:1px solid #ddd;margin:15px 0;">

    <div class="outdiv">
      <div class="xiajuli">
<!--        &lt;!&ndash;    选择城市&ndash;&gt;-->
<!--        <el-cascader style="width: 12rem;float: left" size="small" placeholder="请选择城市" :props="provinceOptions"-->
<!--          v-model="provinceOptions.lazyLoad"></el-cascader>-->
<!--        &lt;!&ndash;    手机号&ndash;&gt;-->
<!--        <el-input size="small" style="float: left;width: 130px;margin-left: 10px" placeholder="请输入手机号" v-model="input"-->
<!--          clearable>-->
<!--        </el-input>-->
<!--        &lt;!&ndash;    订单状态&ndash;&gt;-->
<!--        <el-select style="width: 150px;float: left;margin-left: 10px" v-model="orderStateValue" placeholder="请选择订单状态"-->
<!--          size="small">-->
<!--          <el-option v-for="item in orderState" :key="item.order_status_id" :label="item.order_status_name"-->
<!--            :value="item.order_status_id">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--        &lt;!&ndash;    订单类型&ndash;&gt;-->
<!--        <el-select style="width: 150px;float: left;margin-left: 10px" v-model="orderTypeValue" placeholder="请选择订单类型"-->
<!--          size="small">-->
<!--          <el-option v-for="item in orderType" :key="item.order_type_id" :label="item.order_type_name"-->
<!--            :value="item.order_type_id">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--        &lt;!&ndash;    下单日期&ndash;&gt;-->
<!--        <span class="demonstration" style="margin-left: 10px;font-size: 12px">请选择下单日期</span>-->
<!--        <el-date-picker style="margin-left: 10px;width: 250px" v-model="time" type="daterange"-->
<!--          value-format="yyyy-MM-dd HH:mm:ss" size="small" range-separator="至" start-placeholder="开始日期"-->
<!--          end-placeholder="结束日期">-->
<!--        </el-date-picker>-->


<!--        &lt;!&ndash;    搜索按钮&ndash;&gt;-->
        <div class="rfloat">
<!--          <el-button type="primary" circle plain icon="el-icon-search" @click="selectOrderData()"></el-button>-->
          <el-button type="danger"  icon="el-icon-plus" circle plain @click="dialogFormVisibleThree = true"></el-button>
        </div>
      </div>
      <!--    表格-->
      <el-table ref="multipleTable" :data="fenye" tooltip-effect="light" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="订单号" width="125px" prop="order_number">
        </el-table-column>
        <el-table-column prop="order_type_name" label="订单类型" >
        </el-table-column>
        <el-table-column prop="user_name" label="客户姓名" >
        </el-table-column>
        <el-table-column prop="fee_place" label="城市">
        </el-table-column>
        <el-table-column prop="user_phone" label="手机号">
        </el-table-column>
        <el-table-column prop="car_license_num" label="车牌号">
        </el-table-column>
        <el-table-column prop="pick_name" label="接车司机" >
        </el-table-column>
        <el-table-column prop="car_pickplace" label="接车地址">
        </el-table-column>
        <el-table-column prop="order_status_name" label="订单状态">
        </el-table-column>
        <el-table-column prop="order_time" label="下单时间">
        </el-table-column>
        <el-table-column label="操作">
          <!--                支付-->
          <template slot-scope="scope">
            <el-tooltip content="去评价" placement="top" v-if="scope.row.order_status_name==='已完成' || scope.row.order_status_name==='已评价'">
              <el-button icon="el-icon-chat-dot-square" plain circle type="primary"  @click="qupingjia(scope.row)" :disabled="scope.row.order_status_name==='已评价'" ></el-button>
            </el-tooltip>

            <el-tooltip content="申请退款" placement="top" v-else-if="scope.row.order_status_name==='待接单'">
            <el-button icon="el-icon-notebook-2" plain circle type="primary"  @click="shenqingtuikuan(scope.row)" ></el-button>
            </el-tooltip>

            <el-tooltip content="查看驳回理由" placement="top" v-else-if="scope.row.order_status_name==='已驳回'">
            <el-button icon="el-icon-refresh-right" plain circle type="primary" @click="bohuiliyou(scope.row)" ></el-button>
            </el-tooltip>

            <el-tooltip content="去支付" placement="top" v-else>
              <el-button icon="el-icon-document" plain circle type="primary" @click="pay(scope)" :disabled="scope.row.order_status_name!=='待付款'" ></el-button>
            </el-tooltip>

            <el-dialog title="支付" :visible.sync="dialogFormVisibleFour" :append-to-body="true">
              <el-form :model="payOrder">
                <el-form-item label="优惠券抵用金额" :label-width="formLabelWidth">
                  <el-select v-model="valueFive" @change="add(scope)" size="small" placeholder="请选择优惠券">
                    <el-option v-for="item in coupon" :key="item.coupon_id" :label="item.price" :value="item.coupon_id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="订单号" :label-width="formLabelWidth">
                  <el-input disabled v-model="payOrder.dingdanhao" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="订单总金额" :label-width="formLabelWidth">
                  <el-input disabled v-model="payOrder.dingdanzong" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="支付方式" :label-width="formLabelWidth">
                  <el-input disabled v-model="payOrder.zhifufangshi" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="支付单号" :label-width="formLabelWidth">
                  <el-input disabled v-model="payOrder.zhifudanhao" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="优惠券抵用后价格" :label-width="formLabelWidth">
                  <el-input disabled v-model="payOrder.diyonghou" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所购商品名称" :label-width="formLabelWidth">
                  <el-input disabled v-model="payOrder.goumaishangping" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户应付价格" :label-width="formLabelWidth">
                  <el-input disabled v-model="payOrder.yingfujiage" autocomplete="off"></el-input>
                </el-form-item>
                <el-button @click="payOrderTwo(scope)" class="zhifuanniu">去支付</el-button>
              </el-form>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
      <!--     分页-->
      <el-pagination :background="state" align="center" :current-page="elPage" @current-change=elChangePage
        :page-size=pageSize layout="prev,pager,next" :total="userData.length">
      </el-pagination>
      <!--      新增订单-->

    </div>

    <el-dialog title="新增订单" :visible.sync="dialogFormVisibleThree">
      <el-form :model="newForm">
        <el-form-item label="选择城市">
          <el-cascader style="width: 200px;float: left" size="small" placeholder="请选择城市" :props="provinceOptions"
            v-model="provinceOptions.lazyLoad" @change="select4s"></el-cascader>
        </el-form-item>
        <el-form-item label="4S店">
          <el-select v-model="value" size="small" placeholder="请选择">
            <el-option v-for="item in four" :key="item.stores_id" :label="item.stores_short_name"
              :value="item.stores_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="定损地点">
          <el-input placeholder="请输入定损地点" v-model="newForm.dingsun" clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="客户备注">
          <el-input placeholder="请输入备注" v-model="newForm.beizhu" clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="订单类型">
          <el-select style="width: 150px;float: left;margin-left: 10px" v-model="orderTypeValue" placeholder="请选择订单类型"
            size="small">
            <el-option v-for="item in orderType" :key="item.order_type_id" :label="item.order_type_name"
              :value="item.order_type_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="接车司机">
          <el-select v-model="valueTwo" size="small" placeholder="请选择接车司机">
            <el-option v-for="item in jieche" :key="item.driver_id" :label="item.user_name" :value="item.driver_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="接车时间">
          <el-date-picker style="margin-left: 10px;width: 250px" v-model="newForm.time" type="date"
            value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择下单日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="还车司机">
          <el-select v-model="valueThree" size="small" placeholder="请选择还车司机">
            <el-option v-for="item in jieche" :key="item.driver_id" :label="item.user_name" :value="item.driver_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="接车地址">
          <el-input placeholder="请输入备注" v-model="newForm.jiechedizhi" clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="还车地点">
          <el-input placeholder="请输入备注" v-model="newForm.huanchedizhi" clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="登记人">
          <el-input placeholder="请输入备注" v-model="newForm.dengjiren" clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="特定事项">
          <el-input placeholder="请输入备注" v-model="newForm.tedingshixiang" clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="车主卡">
          <el-select v-model="valueFour" size="small" placeholder="请选择车主卡">
            <el-option v-for="item in card" :key="item.owner_card_id" :label="item.car_license_num"
              :value="item.owner_card_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="修理部位图片">
          <el-upload multiple class="upload-demo" ref="upload" action="/api/uploadImg.do" :on-success="uploadImage"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="图片附件">
          <el-upload multiple class="upload-demo" ref="uploadTwo" action="/api/uploadImg.do"
            :on-success="uploadImageFile" :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUploadTwo">上传到服务器
            </el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-button style="margin-left: 380px" type="primary" size="small" @click="dialogFormVisibleThree  = false">取消
        </el-button>
        <el-button style="margin-left: 20px" type="primary" size="small" @click="uploadData">确定</el-button>
      </el-form>
    </el-dialog>
    <!--申请退款框-->
    <el-dialog title="退款理由" :visible.sync="centerDialogVisible" width="30%" center>
      <el-input type="textarea" placeholder="请输入内容" v-model="tuikuanliyou" maxlength="30" show-word-limit>
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="quedingshenqing">确 定</el-button>
      </span>
    </el-dialog>
    <!--去评价框-->
    <el-dialog title="评价" :visible.sync="pingjiakuang" width="40%" center class="pingjiakuang">
      <div id="xingshu" class="clear">
        <p>请选择评价等级:</p>
        <el-rate v-model="pingjiaxingji" :colors="colors">
        </el-rate>
      </div>
      <el-input class="mingancishurukuang" type="textarea" :rows="3" placeholder="请输入内容" v-model="pingjianeirong">
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="pingjiakuang = false">取 消</el-button>
        <el-button type="primary" @click="quedingpingjia">确 定</el-button>
      </span>
    </el-dialog>
    <!--查看驳回框-->
    <el-dialog title="驳回理由" :visible.sync="bohuiliyoukuang" width="30%" center>
      <el-input v-model="bohuiliyouneirong" disabled>
      </el-input>

    </el-dialog>
  </div>
</template>

<script>
  import myMixin from "../../utils/mixin";
  import * as api from '../../utils/api'
  export default {
    name: 'userdingdan',
    mixins: [myMixin],
    data() {
      return {
        pageSize: 3,
        value: '',
        valueTwo: '',
        valueThree: '',
        valueFour: '',
        valueFive: '',
        time: '',
        formLabelWidth: '120px',
        multipleSelection: [],
        state: true,
        input: '',
        orderState: [],
        orderStateValue: '',
        orderType: [],
        orderTypeValue: '',
        outerVisible: false,
        innerVisible: false,
        dialogFormVisible: false,
        dialogFormVisibleTwo: false,
        dialogFormVisibleThree: false,
        dialogFormVisibleFour: false,
        errobj: {},
        xiangqingData: [],
        four: [],
        jieche: [],
        card: [],
        xiuliimgUrl: [],
        imgUrl: [],
        coupon: [],
        couponPay: '',
        form: {
          bianhao: '',
          type: '',
          xiadantime: '',
          jiechesiji: '',
          huanchesiji: '',
          orderstate: '',
          fours: '',
          daiding: '',
          sendemail: '',
          jiechetime: '',
          chepaihao: '',
          fadongji: '',
          beibaoxianren: '',
          lianxiren: '',
          phone: '',
          dingsundi: '',
          dengjiren: '',
          jiechedizhi: '',
          huanchedizhi: '',
          kehubeizhu: '',
          xiuli: '',
          zhifudanhao: '',
          zhifufangshi: '',
          zhifustate: '',
          zongji: '',
          youhuiquan: '',
          yingfujin: '',
          yujitime: '',
          paizhaoneirong: '行驶证,交强保险单(并附微信),驾驶证',
          image: '',
        },
        newForm: {
          time: '',
          dingsun: '',
          beizhu: '',
          jiechedizhi: '',
          huanchedizhi: '',
          dengjiren: '',
          tedingshixiang: '',
        },
        payOrder: {
          youhuiquan: '',
          dingdanhao: '',
          dingdanzong: '',
          zhifufangshi: '',
          zhifudanhao: '',
          diyonghou: '',
          goumaishangping: '',
          yingfujiage: ''
        },
        userData: [],
        /*退款框*/
        tuaikuanData: '',
        tuikuanliyou: '',
        centerDialogVisible: false,
        /*评价框*/
        colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
        pingjiakuang: false,
        pingjiaxingji: null,
        pingjianeirong: '',
        pingjiaData: '',
        /*驳回理由框*/
        bohuiliyouneirong: '',
        bohuiliyoukuang: false,
        bohuiData: '',
      }
    },
    methods: {
      add(num) {
        for (let i = 0; i < this.coupon.length; i++) {
          if (this.coupon[i].coupon_id === this.valueFive) {
            this.couponPay = this.coupon[i].price
          }
        }
        // console.log(this.couponPay);
        this.payOrder.dingdanhao = num.row.order_number;
        this.payOrder.dingdanzong = num.row.orderamount_total;
        this.payOrder.zhifufangshi = num.row.pay_method;
        this.payOrder.zhifudanhao = num.row.pay_number;
        this.payOrder.diyonghou = parseInt(num.row.orderamount_total - this.couponPay);
        this.payOrder.goumaishangping = num.row.order_type_name;
        this.payOrder.yingfujiage = parseInt(num.row.orderamount_total - this.couponPay);
      },
      handleSelectionChange(val) {
        // 表格第一列 被选中的行的数据  val
        // console.log(val);
        this.multipleSelection = val;
      },
      // 查询订单状态
      getOrderStatus() {
        this.axios({
          url: api.GET_SELECT_STATETABLESTATUS,
          method: 'get',
          params: {

          }
        }).then(data => {
          this.orderState = data.data.data;
        })
      },
      // 查询订单类型
      getOrderType() {
        this.axios({
          url: api.GET_SELECT_TYPETABLEDATA,
          method: 'get',
          params: {}
        }).then(data => {
          this.orderType = data.data.data;
        })
      },
      // 多条件查询
      selectOrderData() {
        let cityId = this.provinceOptions.lazyLoad[1];
        this.axios({
          url: api.POST_SELECT_CONDITIONSTABLEDATA,
          method: 'post',
          data: {
            city_id: cityId,
            user_phone: this.input,
            order_status_id: this.orderStateValue,
            order_type_id: this.orderTypeValue,
            order_time: this.time[0],
            order_time_end: this.time[1],
          }
        }).then(data => {
          // console.log(data);
          this.userData = data.data.data;
          this.selectDataByUserId();
          this.elPage = 1;
          this.clearData()
        });
      },
      // 优惠券
      pay(num) {
        // console.log(num);
        this.dialogFormVisibleFour = true;
        this.axios({
          url: api.GET_COUPON,
          method: 'get',
          params: {
            user_id: this.$store.state.msgCount.user.user_id
          }
        }).then(data => {
          this.coupon = data.data.data;
          // console.log(this.coupon);
        });
      },
      // 支付跳转
      payOrderTwo(num) {
        this.axios({
          url: api.POST_PAY_ORDER,
          method: 'post',
          data: {
            user_id: this.$store.state.msgCount.user.user_id,
            coupon_id: this.valueFive,
            orderNumber: num.row.order_number,
            orderamountTotal: num.row.orderamount_total,
            payMethod: num.row.pay_method,
            payNumber: num.row.pay_number,
            paymentOnline: num.row.orderamount_total - this.couponPay,
            productName: num.row.order_type_name,
            userPayble: num.row.orderamount_total - this.couponPay,
          }
        }).then(data => {
          this.$router.push({
            name: 'payGeteWay',
            params: {
              htmlData: data.data.data
            }
          })
          // console.log(data.data.data)
          // this.httpPay=data.data.data;
          // console.log(this.httpPay);
        });

      },
      // 查询4S店
      select4s() {
        let areaId = this.provinceOptions.lazyLoad[2];
        this.axios({
          url: api.GET_SELECT_4S,
          method: 'get',
          params: {
            area_city_id: areaId
          }
        }).then(data => {
          this.four = data.data.data;
          // console.log(this.four)
        });
        // 查询司机
        this.axios({
          url: api.GET_SELECT_DRIVERJIE,
          method: 'get',
          params: {
            area_city_id: areaId
          }
        }).then(data => {
          this.jieche = data.data.data;
          // console.log(this.jieche)
        });
        this.selectCard()
      },
      // 查询车主卡
      selectCard() {
        this.axios({
          url: api.GET_SELECT_OWNERCAR,
          method: 'get',
          params: {
            userId: this.$store.state.msgCount.user.user_id
          }
        }).then(data => {
          this.card = data.data.data;
          // console.log(this.card)
        })
      },
      // 图片上传
      submitUploadTwo() {
        this.$refs.uploadTwo.submit();
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      uploadImage(response, file, fileList) {
        this.xiuliimgUrl.push(response.data[0]);
        // console.log(this.xiuliimgUrl);
        this.$message('上传成功')
      },
      uploadImageFile(response, file, fileList) {
        this.imgUrl.push(response.data[0]);
        // console.log(this.imgUrl);
        this.$message('上传成功')
      },
      // 新增订单
      uploadData() {
        let cityId = this.provinceOptions.lazyLoad[1];
        this.axios({
          url: api.POST_ADD_ORDER,
          method: 'post',
          data: {
            storesId: this.value,
            feePlace: this.newForm.dingsun,
            customerRemarks: this.newForm.beizhu,
            orderType: this.orderTypeValue,
            cityId: cityId,
            carPickdriver: this.valueTwo,
            carPicktime: this.newForm.time.toString(),
            carAlsodriver: this.valueThree,
            carPickplace: this.newForm.jiechedizhi,
            carAlsoplace: this.newForm.huanchedizhi,
            registrar: this.newForm.dengjiren,
            specificMatters: this.newForm.tedingshixiang,
            ownerCardId: this.valueFour,
            repair_img_address: this.xiuliimgUrl,
            img_address: this.imgUrl
          }
        }).then(data => {
          // console.log(data);
          if (data.data.code === 200) {
            this.selectDataByUserId();
            this.$message('添加成功');
            this.dialogFormVisibleThree = false;
          } else {
            this.$message('添加失败，请重新添加');
          }

        })
      },
      // 通过用户id查询订单
      selectDataByUserId() {
        this.axios({
          url: api.GET_SELECT_USERDATA,
          method: 'get',
          params: {
            user_id: this.$store.state.msgCount.user.user_id
          }
        }).then(data => {
          // console.log(data);
          this.userData = data.data.data
        })
      },
      //去评价和退款
      qupingjia(data) {
        // console.log(data)
        this.pingjiaData = data;
        this.pingjiakuang = true
      },
      shenqingtuikuan(data) {
        // console.log(data);
        this.tuaikuanData = data;
        this.centerDialogVisible = true
      },
      quedingshenqing() {
        this.centerDialogVisible = false;
        this.axios({
          method: 'post',
          url: api.POST_APPLYREFUND,
          data: {
            refundReasons: this.tuikuanliyou,
            orderNumber: this.tuaikuanData.order_number
          }
        }).then(data => {
          // console.log(data);
          if (data.data.code === 200) {
            this.$message({
              type: 'success',
              message: '申请退款成功!'
            });
            this.selectDataByUserId()
          } else {
            this.$message({
              type: 'info',
              message: '申请退款失败，请重新申请！'
            });
          }
        })
      },
      quedingpingjia() {
        this.axios({
          method: 'post',
          url: api.POST_ADDDRIVEREVAL,
          data: {
            orderId: this.pingjiaData.order_id,
            evaluate: this.pingjianeirong,
            userId: this.$store.state.msgCount.user.user_id,
            starNumber: this.pingjiaxingji
          }
        }).then(data => {
          // console.log(data);
          if (data.data.code === 200) {
            this.$message({
              type: 'success',
              message: '评价成功!'
            });
            this.pingjiakuang = false;
            this.selectDataByUserId()
          } else if (data.data.code === 500) {
            this.$message({
              type: 'info',
              message: '评价中包含敏感词，请重新评价！'
            });
          }

        })
      },
      bohuiliyou(data) {
        this.bohuiliyoukuang = true
        // console.log(data)
        this.axios({
          method: 'get',
          url: api.GET_REJECT,
          params: {
            orderNumber: data.order_number
          }
        }).then(data => {
          // console.log(data)
          if (data.data.code === 200) {
            this.bohuiliyouneirong = data.data.data[0].reject_reasons
          }
        })

      },
    },
    computed: {
      fenye() {
        let kaishi = (this.elPage - 1) * this.pageSize;
        return this.userData.slice(kaishi, kaishi + this.pageSize)
      },
    },
    created() {
      // console.log(this.$store.state.msgCount.user.user_id);
      this.selectDataByUserId();
      this.getOrderStatus();
      this.getOrderType();
    }
  }
</script>

<style lang="less" scoped>
  /deep/.el-table th>.cell {
    text-align: center;
  }

  /deep/.el-table .cell {
    text-align: center;
  }
  #xingshu {
    width: 100%;
    margin-bottom: 2rem;
  }

  #xingshu>p {
    width: 10rem;
    float: left;
  }

  #xingshu>.el-rate {
    width: 15rem;
    float: left;
  }
  .el-pagination{
    margin-top: 3rem;
  }
  .zhifuanniu{
    width: 7rem;
    margin: 0 2rem;
  }
</style>